<template>
  <view class="live-streaming-wrap">
    <view class="live-container">
      <!-- 使用live-player组件观看直播 -->
      <live-player
        id="livePlayer"
        class="live-player"
        src="https://domain/pull_stream"
        mode="live"
        :autoplay="true"
        @statechange="statechange"
        @error="error"
        style="width: 300px; height: 225px;"
      ></live-player>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    statechange(e) {
      console.log('live-player code:', e.detail.code)
    },
    error(e) {
      console.error('live-player error:', e.detail.errMsg)
    }
  }
}
</script>

<style>
.live-streaming-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.live-container {
  position: relative;
  width: 300px;
  height: 225px;
}

.live-player {
  width: 100%;
  height: 100%;
}
</style>
